<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from "vue-router";
const toast = useToast()

const history = ref([])
const userId = ref(null)//localStorage.getItem('user_id')
const rec = ref([])
if (process.client) {
  userId.value = +localStorage.getItem('user_id')
}
const router = useRouter();
const go = (item) => {
  // let userId = localStorage.getItem('user_id')
  // item.userId = userId
  router.push({
    path: '/user/userDetail',
    query: { item: JSON.stringify(item) }
  })
}

const sports = ref([])
const getHistory = () => {
  let payload = {
    user_id: userId.value
  }
  return axios.post('http://localhost:8000/log/get_one', payload).then(res => {
    let data = res.data
    if (data.code === 200) {
      history.value = data.data
    }
  })
}
const getSport = () => {
  return axios.post("http://localhost:8000/sport/get_one", {}).then(res => {
    let data = res.data
    if (data.code === 200) {
      sports.value = data.data
    }
  })
}
const deleteOne = (item) => {
  return axios.post("http://localhost:8000/log/delete_one", item).then(res => {
    let data = res.data
    if (data.code === 200) {
      toast.add({
        icon: 'i-heroicons-information-circle-20-solid',
        title: '删除成功',
      })
      getHistory()
    } else {
      toast.add({
        icon: 'i-heroicons-information-circle-20-solid',
        title: '删除失败',
        color: 'red',
        // description: resp.msg,
      })
    }
  })
}
const getRec2 = () => {
  let payload = {
    user_id: userId.value
  }
  return axios.post("http://localhost:8000/log/recommend2", payload).then(res => {
    let data = res.data
    if (data.code === 200) {
      rec.value = data.data
    }
  })
}

getHistory()
getSport()
getRec2()
let mapping = {
  '1': '有氧运动',
  '2': '长跑',
  '3': '瑜伽',
  '4': '健身'
}
function findSport(id) {
  for (let i = 0; i < sports.value.length; i++) {
    if (+sports.value[i].id === +id) {
      return sports.value[i]
    }
  }
}
</script>

<template>
  <div class="w-full h-full">
    <div class="flex">
      <div class="flex-1 ">
        <h1 class="text-3xl font-bold">
          历史记录
        </h1>
        <div class="h-screen overflow-y-scroll">

          <div v-for="item in history" :key="item.id">
            <div class="flex border justify-around mt-2 h-20 p-3">
              <span class="text-2xl font-bold flex">{{ findSport(item['sport_id']).name }}
                <img :src="findSport(item['sport_id']).pic" class=" rounded-full h-8 w-8 mt-1 ml-2" />
              </span>
              <el-tag>{{ item.click_time }}</el-tag>
              <el-button type="danger" @click="deleteOne(item)">删除</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-1 ml-2">
        <h1 class=" text-3xl font-bold">
          相似推荐
        </h1>
        <div class="h-screen overflow-y-scroll">
          <div v-for="item in rec" :key="item.id">
            <div @click="go(item)"
              class="flex border justify-around mt-2 h-20 p-3 hover:cursor-pointer hover:shadow-xl">
              <span class="text-2xl font-bold flex">{{ item.username }}
                <img :src="item.pics" class=" rounded-full h-8 w-8 mt-1 ml-2" />
              </span>
              <div class="grid grid-cols-4 gap-4">
                <div>
                  年龄：{{ item.age }}
                </div>
                <div>
                  性别：{{ item.gender }}
                </div>
                <div>
                  身高：{{ item.height }}
                </div>
                <div>
                  体重：{{ item.weight }}
                </div>
                <div>
                  计划：{{ item.ext }}
                </div>
                <div>
                  运动标签：
                  <el-tag v-for="i in item.tags">
                    {{ mapping[i] }}
                  </el-tag>
                  <!-- {{ mapping[item.tags] }} -->
                </div>
              </div>

              <!-- <el-tag>{{item.tags}}</el-tag> -->
              <!-- <el-tag>{{item.click_time}}</el-tag> -->
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<style scoped></style>